<template>
    <div>
        <div class="head">
            <a @click="$router.push({path: '/OrderRecord'})" class="return"></a>
            投诉
        </div>
        <div class="overlay nav-btm">
            <div class="overlay-content scrolling" style="padding: 0px 15px;">
                <van-field v-model="message" type="textarea" placeholder="请输入您要的投诉内容" rows="8" autosize maxlength="100" />
                <div style="padding: 10px 0px;">
                    <span>请上传凭证</span>
                </div>
                <van-uploader v-model="fileList" @delete="deleteImg" multiple accept="*" :max-count="3" :after-read="afterRead" :before-read="beforeRead" />
                <van-progress v-if="percentageType == true" :percentage="percentage" color="#3fb776" style="margin-top: 10px;"/>
                <div style="padding-top: 30px;">
                    <van-button size="normal" class="van-button--info" @click="sure" :loading="loading" :disabled="load" :text="ok"></van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // import { otc } from './../utils/api';
    import axios from 'axios'
    export default {
        data() {
            return {
              loading: false,
              message: '',
              fileList: [],
              img: '', // picture
              img2: '', // picture
              img3: '', // picture
              load: true,
              ok: '确认投诉',
              percentage: 0,
              percentageType: false
            }
        },
        beforeCreate() {
          
        },
        created() {

        },
        mounted() {

        },
        methods: {
            beforeRead(file) {
                return new Promise((resolve, reject) => {
                    if(file.type === 'image/jpeg' || file.type === 'image/png') {
                        resolve();
                    } else {
                        this.$toast('请上传 jpg 或者 png 格式的图片!');
                        reject();
                    }
                });
            },
            deleteImg() { // 删除文件时触发
                this.ok = '确认投诉';
                this.percentageType = false;
            },
            afterRead(file) {
                this.load = true;
                this.percentageType = true;
                this.ok = '正在上传中，请稍候';
                let param = new FormData();
                param.append('file', file.file, file.file.name);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: progressEvent => {
                        this.percentage = (progressEvent.loaded / progressEvent.total * 100 | 0);
                    }
                }; // 添加请求头
                axios.post('http://up-z1.qiniu.com', param, config).then(res => {
                    if(res.data.code == 200){
                        if(this.img == '' && this.img2 == '' && this.img3 == ''){
                            this.img = res.data.data[0].url;
                        }else if(this.img && this.img2 == '' && this.img3 == ''){
                            this.img2 = res.data.data[0].url;
                        }else if(this.img && this.img2 && this.img3 == ''){
                            this.img3 = res.data.data[0].url;
                        }
                        this.$toast('凭证上传成功');
                        this.load = false;
                    }else{
                        this.$toast(res.msg);
                    }
                    this.ok = '确认投诉';
                    this.percentageType = false;
                }).catch(()=> {
                    this.$toast("凭证上传失败");
                    this.ok = '确认投诉';
                    this.percentageType = false;
                });
            },
            sure() { // 申诉
                if(!this.message) {
                    this.$toast('申诉内容不能为空!');
                    return false;
                }
                if(!this.img || !this.img2 || !this.img3) {
                    this.$toast('申诉凭证不能为空!');
                    return false;
                }
                this.loading = true;
                // otc.getAppealOrder({
                //     "orderId": this.$route.query.id,
                //     "credentials": this.img + ',' + this.img2 + ',' + this.img3,
                //     "remark": this.message,
                // }).then(res => {
                //     if(res.code == 200){
                //         this.$toast('申诉成功');
                //         setTimeout(()=>{
                //             this.$router.push({
                //                 path: '/OrderRecord',
                //             })
                //         },500);
                //     }else{
                //         this.$toast(res.msg);
                //     }
                //     this.loading = false;
                // })
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .van-cell {
        background: #212639;
    }
    
    /deep/ .van-field__body textarea::-webkit-input-placeholder {
        color: rgb(133, 141, 172)!important;
        font-size: 14px;
    }
    
    /deep/ .van-cell:not(:last-child)::after {
        border: 0;
    }
    
    /deep/ .van-uploader__upload {
        background: transparent;
        width: 70px;
        height: 70px;
    }
    
    /deep/ .van-uploader__preview-image {
        width: 70px;
        height: 70px;
    }
    
    /deep/ .van-uploader__upload-icon {
        color: white;
    }
</style>